<template>
  <div id="app">
    <div class="table-page">
      <div class="row operate">
        <el-button type="primary" @click="addWord">添加词语</el-button>
        <el-button type="danger" @click="deleteWords">删除词语</el-button>
      </div>
      <div class="table-panel row">  
        <div class="col tags">
          <el-tag :effect="fliterIndex[0]==1? 'dark': 'plain'" @click="fliterWord(0)">成语</el-tag>
          <el-tag :effect="fliterIndex[1]==1? 'dark': 'plain'"  @click="fliterWord(1)">非成语</el-tag>
          <el-tag :effect="fliterIndex[2]==1? 'dark': 'plain'" @click="fliterWord(2)">适合年轻人</el-tag>
          <el-tag :effect="fliterIndex[3]==1? 'dark': 'plain'" @click="fliterWord(3)">适合中老年人</el-tag>
          <el-tag :effect="fliterIndex[4]==1? 'dark': 'plain'" @click="fliterWord(4)">动物</el-tag>
          <el-tag :effect="fliterIndex[5]==1? 'dark': 'plain'" @click="fliterWord(5)">人物</el-tag>
          <el-tag :effect="fliterIndex[6]==1? 'dark': 'plain'" @click="fliterWord(6)">食物</el-tag>
          <el-tag :effect="fliterIndex[7]==1? 'dark': 'plain'" @click="fliterWord(7)">物品</el-tag>
          <el-tag :effect="fliterIndex[8]==1? 'dark': 'plain'" @click="fliterWord(8)">地点</el-tag>
          <el-tag :effect="fliterIndex[9]==1? 'dark': 'plain'" @click="fliterWord(9)">娱乐</el-tag>
          <el-tag :effect="fliterIndex[10]==1? 'dark': 'plain'" @click="fliterWord(10)">动作</el-tag>
          <el-tag :effect="fliterIndex[11]==1? 'dark': 'plain'" @click="fliterWord(11)">名称</el-tag>
        </div>
        <div class="words-table">
          <div class="rule">
            说明：<br>
            (1)难易程度(1-5)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表示&nbsp;&nbsp;1非常简单 / 2简单 / 3适中 / 4困难 / 5非常困难<br>
            (2)适合年龄段(0-2)&nbsp;&nbsp;表示&nbsp;&nbsp;0全部 / 1年轻人 / 2中老年人<br>
            (3)是否是成语(0-1)&nbsp;&nbsp;表示&nbsp;&nbsp;0非成语 / 1成语 
          </div>
          <el-table
            :data="words"
            height="800"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="title"
              label="词语">
            </el-table-column>
            <el-table-column
              prop="hard"
              sortable
              label="难易程度">
            </el-table-column>
            <el-table-column
              prop="applyAge"
              sortable
              label="适合年龄段">
            </el-table-column>
            <el-table-column
              prop="isIdiom"
              sortable
              label="是否是成语">
            </el-table-column>
            <el-table-column
              prop="type"
              label="分类">
            </el-table-column>
            <el-table-column
              prop="tag"
              label="标签">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <wordForm @close="hiddenForm" v-show="showFormPanel"></wordForm>
  </div>
</template>

<script>
import api from './api'
import wordForm from './components/WordForm'

export default {
  name: 'app',
  data() {
    return {
      words: [],
      showFormPanel: false,
      fliterIndex: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    }
  },
  components: {
    wordForm
  },
  methods: {
    getWords() {
      api.word.get().then(res => {
        this.words = res.data
      })
    },
    handleSelectionChange(val) {
      this.deleteIds = val
    },
    deleteWords() {
      if(localStorage.token && localStorage.token == '950814') {
        this.$confirm('此操作将永久删除该词语, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let arr = this.deleteIds
          let ids = []
          for(let i=0;i<arr.length;i++) {
            ids.push(arr[i]._id)
          }
          api.word.delete({ ids: ids }).then( res => {
            if(res) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getWords()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      } else {
        this.$message({
          type: 'info',
          message: '不好意思，你没有删除权限，可向管理员申请~'
        });   
      }
      
    },
    hiddenForm() {
      this.showFormPanel = false
    },
    addWord() {
      this.showFormPanel = true
    },
    fliterWord(index) {
      if(index >= 4) {
        let arr = this.fliterIndex
        let activeIndex = -1
        for(let i=4;i<arr.length;i++) {
          if(arr[i] == 1 && i!= index) {
            activeIndex = i
            i = 99
            break
          }
        }
        if(activeIndex != -1) {
          this.$set(this.fliterIndex, activeIndex, 0)
        }
      }
      let n = this.fliterIndex[index]==0?1:0
      this.$set(this.fliterIndex, index, n)
      if(index == 0 && n == 1 && this.fliterIndex[1] == 1) {
        this.$set(this.fliterIndex, 1, 0)
      }
      if(index == 1 && n == 1 && this.fliterIndex[0] == 1) {
        this.$set(this.fliterIndex, 0, 0)
      }
      if(index == 2 && n == 1 && this.fliterIndex[3] == 1) {
        this.$set(this.fliterIndex, 3, 0)
      }
      if(index == 3 && n == 1 && this.fliterIndex[2] == 1) {
        this.$set(this.fliterIndex, 2, 0)
      }
      this.computedFilter()
    },
    computedFilter() {
      // 0成语 1非成语 2适合年轻人 3适合中老年人 4动物 5人物 6物品
      // 7食物 8地点 9娱乐 10动作 11名称 
      let query = {}
      if(this.fliterIndex[0] == 1) query['isIdiom'] = 1
      if(this.fliterIndex[1] == 1) query['isIdiom'] = 0
      if(this.fliterIndex[2] == 1) query['applyAge'] = 1
      if(this.fliterIndex[3] == 1) query['applyAge'] = 2
      if(this.fliterIndex[4] == 1) query['type'] = '动物'
      if(this.fliterIndex[5] == 1) query['type'] = '人物'
      if(this.fliterIndex[6] == 1) query['type'] = '食物'
      if(this.fliterIndex[7] == 1) query['type'] = '物品'
      if(this.fliterIndex[8] == 1) query['type'] = '地点'
      if(this.fliterIndex[9] == 1) query['type'] = '娱乐'
      if(this.fliterIndex[10] == 1) query['type'] = '动作'
      if(this.fliterIndex[11] == 1) query['type'] = '名称'
      api.word.get(query).then(res => {
        this.words = res.data
      })
    }
  },
  created() {
    this.getWords()
  }
}
</script>

<style>
  html, body {
    margin: 0;
    padding: 0;
  }
  .row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .col {
    display: flex;
    flex-direction: column;
  }
  .operate {
    justify-content: flex-end;
    margin: 16px 0;
  }
  .table-page {
    max-width: 1300px;
    min-width: 70%;
    margin: 20px auto;
  }
  .rule {
    color: red;
    margin: 12px 0 12px 12px;
  }
  .words-table {
    align-items: flex-start;
    flex-grow: 1;
  }
  .table-panel {
    align-items: flex-start;
  }
  .tags {
    margin-right: 22px;
    margin-top: 130px;
  }
  .tags .el-tag {
    margin-bottom: 12px;
    text-align: center;
    cursor: pointer;
  }
  .active-tag {
    color: red;
  }
  .tag {
    color: black;
  }
  .tag.active {
    color: red;
  }
</style>
